//
//  SectionRow.swift
//  ClockIn
//
//  Created by enrique leo on 17/8/21.
//

import SwiftUI

struct SectionRowView: View {
    @State var contentFontColor: UIColor = UIColor.systemGray2
    @State var firstEdit: Bool = true
    @State var sectionRow: SectionRow
    //    @State var contentId: Int
    @Binding var selfSectionRows: [SectionRow]
    
    var body: some View {
        VStack {
            HStack {
                TextEditor(text: $sectionRow.content)
                    .onChange(of: sectionRow.content, perform: { value in
                        for (index, _) in SectionRows.enumerated() {
                            if SectionRows[index].id == sectionRow.id{
                                SectionRows[index].content = sectionRow.content
                            }
                        }
                        if firstEdit {
                            sectionRow.content = ""
                            firstEdit = false
                            contentFontColor = UIColor.black
                        }
                    })
                    .foregroundColor(Color(contentFontColor))
                    .padding(EdgeInsets(top: 0, leading:  10, bottom: 10, trailing: 10))
                
                VStack {
                    Button(action: {
                        selfSectionRows = selfSectionRows.filter({$0.id != sectionRow.id})
                        SectionRows = selfSectionRows
                        print(selfSectionRows)
                    }) {
                        Image(systemName: "xmark.circle.fill")
                            .foregroundColor(Color(UIColor.systemGray))
                            .font(Font.system(size: 22))
                            .frame(height: (sectionRow.id != 0) ? nil : 0)
                    }
                    
                    Spacer()
                }
                .padding(EdgeInsets(top: 5, leading:  0, bottom: 0, trailing: 5))
                
            }
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
                        ZStack {
                            Rectangle()
                                .stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))
                                .foregroundColor(Color(UIColor.systemGray2))
                            
                            Text("+")
                                .font(Font.system(size: 50))
                                .foregroundColor(Color(UIColor.systemGray2))
                        }
                        .frame(width: 100, height: 100)
                    }
                        
                    ForEach(0..<5){ num in
                        Image("chilkoottrail")
                            .resizable()
                            .frame(width: 100, height: 100)
                            .padding(EdgeInsets(top: 0, leading:  10, bottom: 0, trailing: 0))
                    }
                }
            }
            .padding(EdgeInsets(top: 0, leading:  10, bottom: 0, trailing: 0))
            
            
            Divider()
        }
        
    }
}

extension SectionRowView{
    private var delButton: some View{
        Button(action: {
            SectionRows[sectionRow.id] = sectionRow
            print(SectionRows)
        }) {
            Image(systemName: "xmark.circle.fill")
                .foregroundColor(Color(UIColor.systemGray))
                .font(Font.system(size: 25))
        }
    }
}

struct SectionImgView: View {
    @State var contentFontColor: UIColor = UIColor.systemGray2
    @State var firstEdit: Bool = true
    @State var sectionRow: SectionRow
    @State var isVisible: Bool
    @State var contentId: Int
    @State var selfSectionRows: [SectionRow]
    
    var body: some View {
        HStack {
            Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
                ZStack {
                    Rectangle()
                        .stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))
                        .foregroundColor(Color(UIColor.systemGray2))
                    
                    Text("+")
                        .font(Font.system(size: 50))
                        .foregroundColor(Color(UIColor.systemGray2))
                }
                .frame(width: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
            }
            
            Spacer()
        }
        .padding(EdgeInsets(top: 0, leading:  10, bottom: 10, trailing: 10))
        
        Divider()
    }
}



//struct SectionRowView_Previews: PreviewProvider {
//    static var previews: some View {
//        Group {
//            SectionRowView(sectionRow: SectionRows[0], isVisible: true, sSectionRows: <#Binding<[SectionRow]>#>)
//            
//            SectionRowView(sectionRow: SectionRows[0], isVisible: true, sSectionRows: <#Binding<[SectionRow]>#>)
//        }
//        .previewLayout(.fixed(width: 400, height: 200))
//    }
//}
